<template>
  <div>
    <el-table :data="TableList" style="width: 100%" v-loading="loading">
      <el-table-column fixed prop="baseArea" label="车辆类型" class="Background#eee"></el-table-column>
      <el-table-column prop="carNo" label="使用单位"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="GetDetai(scope.row.hrid)" type="text" size="small">查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="VehicleArchivesPagination">
      <button @click="PageRemove">上一页</button>
      <span>{{page}}/{{total}}</span>
      <button @click="PageAdd">下一页</button>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  components: {},
  props: {},
  data() {
    return {
      TableList: [],
      page: 1,
      total: "",
      DataForm: {
        page: "1"
      },
      loading: false,
      countAll: this.$store.state.count
    };
  },
  watch: {},
  computed: {},
  methods: {
    GetDetai(id) {
      this.$router.push({ path: "/carDetails", query: { id: id } });
    },
    GetData() {
      this.countAll.page = this.DataForm.page;
      this.$store.dispatch("cardetails", this.countAll).then(data => {
        this.TableList = data.list;
        this.total = Math.round(data.total / 5);
        if (this.total == 0) {
          this.total = 1;
        }
      });
    },
    // 上一页
    PageAdd() {
      if (this.page == this.total) {
        MessageBox({
          title: "提示",
          message: "不能再往后了"
        });
      } else {
        this.DataForm.page = this.page + 1;
        this.page = this.DataForm.page;
        this.GetData();
      }
    },
    // 下一页
    PageRemove() {
      if (this.page == 1) {
        MessageBox({
          title: "提示",
          message: "不能再往前了"
        });
      } else {
        this.DataForm.page = this.page - 1;
        this.page = this.DataForm.page;
        this.GetData();
      }
    }
  },
  created() {},
  mounted() {
    this.GetData();
    this.$store.commit("SET_USER_INFO", "车辆档案详情");
  }
};
</script>
<style scoped>
.VehicleArchivesPagination button {
  width: 32%;
  font-size: 0.22rem;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin-top: 0.2rem;
  padding: 0;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
  outline: none;
}
</style>